<template>
 <el-table
         :data="tableData"
         border
         style="width: 100%;"
          :row-class-name="tableRowClassName"
         v-if="tableData.length"
      >
        <el-table-column prop="images" label="商品图片" width="180" align="center">
          	 <template slot-scope="scope">
                  <!-- <img alt="物美价廉" style="width: 200px;"> -->
                  <img  :src="imgUrl+scope.row.images" alt="" style="width: 50px;height: 50px">
            </template>
         </el-table-column>

        <el-table-column  prop="title"  label="商品名" width="220" align="center"></el-table-column>

       <el-table-column prop="price" label="单价" align="center" width="100"></el-table-column>

       <el-table-column label="操作" align="center" width="180">
         <template slot-scope="scope">
            <el-button size="mini" type="danger"  @click="Delete(scope.row.id) ">删除</el-button>
          </template>
        </el-table-column>

        <el-empty description="描述文字"></el-empty>
      </el-table>

 <div v-else style="text-align: center;">

     收藏夹里空空如也，快去逛逛吧 
    </div>

</template>

<script>
export default {
  data () {
    return {
      username: '',
      imgUrl: '../images',
      good: [],

      selectArr: [],

      tableData: {

      }

    }
  },
  created () {
    this.username = sessionStorage.getItem('username')
    this.getgoods(this.username)
  },

  methods: {
    // element ui的样式
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },

    async getgoods (username) {
      const {
        data: result
      } = await this.$http.get('/favorites/getlist?username=' + username, {
        params: this.queryItemInfo
      })
      if (result.status !== 200) return this.$message.error('获取收藏夹信息失败!!')
      this.tableData = result.data

      for (var i = 0; i < this.tableData.length; i++) {
        console.log(result.data[i].images)
        this.good[i] = result.data[i].images
      }
      console.log(result.data)
      console.log('************************')
      console.log(this.good)
    },

    async Delete (id) {
      // 删除商品分类信息,如果为父级节点则需要删除所有的子级信息
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 传递分类id
        const { data: result } = await this.$http.delete('/favorites/deleteit', { params: { id: id, username: this.username } })
        if (result.status !== 200) return this.$message.error('删除收藏失败')
        this.$message.success('删除商品成功')
        // 删除成功之后,刷新页面数据
        this.getgoods(this.username)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
  <style>
    .el-table .warning-row {
      background: oldlace;

    }

    .el-table .success-row {
      background: #f0f9eb;
    }

</style>
